<template>
<div class="container">
    <div class="page-head">
        <div class="left">
            <el-form :inline="true" :model="query" @submit.native.prevent>
                <el-form-item>
                    <picker-view class="rem6" type="company" :multiple="true" v-model="query.company_id" placeholder="签约公司"></picker-view>
                </el-form-item>
                <el-form-item>
                    <el-select class="rem6" v-model="query.check_status" placeholder="审核状态" multiple clearable>
                        <el-option label="待审核" value="0"></el-option>
                        <el-option label="审核中" value="1"></el-option>
                        <el-option label="审核通过" value="2"></el-option>
                        <el-option label="审核不通过" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <picker-view class="rem6" type="paidType" :multiple="true" v-model="query.pay_type" placeholder="付款性质"></picker-view>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="query.total" placeholder="付款金额" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker class="date-range" v-model="query.pay_range" type="daterange" range-separator="至" start-placeholder="实付开始日期" end-placeholder="实付结束日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-button type="primary" native-type="submit" @click="doSearch">搜索</el-button>
            </el-form>
        </div>

        <!-- 更多搜索 -->
        <div class="right">
            <el-popover placement="bottom" width="500" trigger="click">
                <el-form :model="query" label-width="80px" label-position="right" @submit.native.prevent>
                    <el-form-item label="联系方式">
                        <el-input v-model="query.keyword" placeholder="联系人 / 手机号" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="订单类型">
                        <el-select v-model="query.order_type" placeholder="订单类型" clearable>
                            <el-option label="订单" value="1"></el-option>
                            <el-option label="返佣单" value="2"></el-option>
                            <el-option label="定金订单" value="3"></el-option>
                            <el-option label="意向金" value="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="服务类型">
                        <picker-view type="category" :multiple="true" v-model="query.category_id" placeholder="服务类型" :filter="{is_sale:1}"></picker-view>
                    </el-form-item>
                    <el-form-item label="渠道">
                        <source-picker-view ref="sourcePickerRef" type="source" v-model="query.source_id" placeholder="请选择渠道"></source-picker-view>
                    </el-form-item>
                    <el-form-item label="部门">
                        <dpt-picker-view ref="sourcePickerRef" type="department" v-model="query.department_id" placeholder="请选择部门"></dpt-picker-view>
                    </el-form-item>
                    <el-form-item label="承办公司">
                        <picker-view type="company" :multiple="true" v-model="query.service_company_id" placeholder="签约公司"></picker-view>
                    </el-form-item>
                    <el-form-item label="门店">
                        <picker-view type="store" :multiple="true" v-model="query.store_id" placeholder="门店"></picker-view>
                    </el-form-item>

                    <el-form-item label="销售">
                        <picker-view type="user" :multiple="true" :v-model="query.user_id" placeholder="销售"></picker-view>
                    </el-form-item>

                    <el-form-item label="签单日期">
                        <el-date-picker v-model="query.sign_date_range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="预产期">
                        <el-date-picker v-model="query.event_date_range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="warning" @click="doReset">重置</el-button>
                        <el-button type="primary" @click="doSearch">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-button slot="reference" type="primary"><i class="el-icon-search" style="margin-right: 5px"></i>更多</el-button>
            </el-popover>
        </div>
    </div>
    <el-table ref="tableView" height="tableHeight" class="page-body" v-loading="loading" :data="tableData" border @selection-change="handleSelectionChange">
        <el-table-column label="审核状态" prop="check_tag">
            <template slot-scope="scope">
                <el-link type="primary" @click="showDetailView(scope.row.order.id)">{{scope.row.order.check_tag}}</el-link>
            </template>
        </el-table-column>
        <el-table-column label="签单公司" prop="order.company.short_name"></el-table-column>
        <el-table-column label="合作模式" prop="order.cooperation.title"></el-table-column>
        <el-table-column label="订单类型" prop="order.order_type_text"></el-table-column>
        <el-table-column label="服务类型" prop="order.category.title"></el-table-column>
        <el-table-column label="签单销售" prop="order.user.realname"></el-table-column>
        <el-table-column label="联系人" prop="order.bridegroom"></el-table-column>
        <el-table-column label="联系方式" prop="order.bridegroom_mobile"></el-table-column>
        <el-table-column label="门店" prop="order.store.title"></el-table-column>
        <el-table-column label="预产期" prop="order.event_date"></el-table-column>
        <el-table-column label="签单日期" prop="order.sign_date"></el-table-column>
        <el-table-column label="付款性质" prop="type.title"></el-table-column>
        <el-table-column label="付款金额" prop="total"></el-table-column>
        <el-table-column label="期望付款日期" prop="apply_date"></el-table-column>
        <el-table-column label="实际付款日期" prop="pay_real_date"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="page-foot">
        <div class="left">
            <el-button type="primary" icon="el-icon-download" v-has="'order-export'" @click="doExport">导出</el-button>
        </div>
        <div class="right">
            <common-pagination :total="pg.total" :page.sync="pg.page" :limit.sync="pg.limit" @getList="getTableData"></common-pagination>
        </div>
    </div>

    <detail-view ref="detailViewRef"></detail-view>
</div>
</template>

<script>
import pagination from "@/components/mixins/pagination.vue";
import sourcePickerView from "@/components/picker/source.vue";
import dptPickerView from "@/components/picker/department.vue";
import pickerView from "@/components/picker/select.vue";
import detailView from '@/views/order/detail/index';

import {
    getPaymentListApi
} from '@/api/order/finance';

import {
    getDepartmentTreeApi,
} from "@/api/ucenter/department";

const query = {
    check_status: [],
    pay_type: [],
    total: "",
    pay_range: [],
    order_type: "",
    keyword: "",
    category_id: [],
    company_id: [],
    service_company_id: [],
    source_id: [],
    store_id: [],
    department_id: "",
    user_id: [],
    sign_date_range: [],
    event_date_range: [],
};

export default {
    components: {
        sourcePickerView,
        dptPickerView,
        pickerView,
        detailView
    },
    mixins: [pagination],
    data() {
        return {
            query: Object.assign({}, query),
            loading: false,
            tableData: [],
            departmentTree: [],
        }
    },
    created() {
        this.getDptTree();
    },
    methods: {
        doSearch() {
            this.resetPg();
            this.getTableData();
        },
        doReset() {
            this.query = JSON.parse(JSON.stringify(query));
        },
        getTableData() {
            let params = Object.assign({}, this.query);
            params["pagination"] = this.pg;
            this.loading = true;
            getPaymentListApi(params).then((res) => {
                this.loading = false;
                this.tableData = res.data.list;
                this.setPg(res);
            });
        },
        getDptTree() {
            let that = this;
            getDepartmentTreeApi().then((res) => {
                that.departmentTree = res.data.tree;
            });
        },
        doExport() {
            let params = JSON.parse(JSON.stringify(this.query));
            params['is_export'] = 1;
            // 获取文件地址并下载
            getPaymentListApi(params).then(res => {
                if (res.code == 200) {
                    let url = res.data.url;
                    let link = document.createElement('a');
                    link.style.display = 'none';
                    link.href = url;
                    document.body.appendChild(link);
                    link.click();
                } else {
                    // 提醒
                    this.$message.error(res.msg);
                }
            })
        },
        showDetailView(id) {
            this.$refs["detailViewRef"].showDrawer(id);
        },
    }
}
</script>

<style>

</style>
